<template>
  <div id="order">
    <van-nav-bar title="订单列表" />
    <van-card
      v-for="(item, index) in orderList"
      :key="index"
      :price="item.price"
      :title="item.shopName"
      :thumb="uploads + item.image"
    >
      <template #footer>
        <van-button type="info" size="normal" @click="del(item.id)"
          >删除</van-button
        >
      </template>
    </van-card>
    <bottom :active="2"></bottom>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
import axios from "axios";
import Bottom from "@/components/bottom";

export default {
  name: "order",
  components: { Bottom },
  data() {
    return {
      orderList: [],
    };
  },
  computed: {
    ...mapState({
      uploads: (state) => state.uploads,
    }),
  },
  methods: {
    del(id) {
      axios
        .post("/api/order/delOrder", {
          id: id,
        })
        .then((res) => {
          if (res.data.code == 200) {
            Toast.success("删除成功");
            location.reload();
          } else {
            Toast.fail("删除失败");
          }
        });
    },
  },
  created() {
    axios.get("/api/order/orderList").then((response) => {
      this.orderList = response.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
>>> .van-nav-bar {
  background: #42a5f3;
  color: #fff;
  .van-icon,
  .van-nav-bar__title {
    color: #fff;
  }
}
>>> .van-card {
  font-size: 18px;
}
>>> .van-card__title {
  margin-top: 10px;
  line-height: 30px;
  font-weight: bold;
}
</style>